//找到addBtn按钮
let addBtn = document.querySelector('#addBtn');

//获得input文本框
let nameInput = document.querySelector('#nameInput');
let emailInput = document.querySelector('#emailInput');
let jobInput = document.querySelector('#jobInput');

//获得tbody
let dataTbody = document.querySelector('#dataTbody');

//为addBtn添加单击事件（监听）
addBtn.addEventListener('click', () => {
  //获得input文本框的值
  let name = nameInput.value;
  let email = emailInput.value;
  let job = jobInput.value;

  //创建一个emp的json对象
  let emp = {
    name: name,
    email: email,
    job: job,
  };

  //将emp转成字符串
  let empStr = JSON.stringify(emp);

  //创建tr
  //tr的模板代码
  let trTemp = ` 
                    <th scope="row">1</th>
                    <td><input type="checkbox"></td>
                    <td>${name}</td>
                    <td>${job}</td>
                    <td>${email}</td>
                    <td>
                        <button type="button" class="btn btn-link" onclick="removeData(this)">删除<tton>
                        <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-whatever='${empStr}' data-bs-target="#empModal">修改<tton>
                    </td>
                `;

  let tr = document.createElement('tr');
  tr.innerHTML = trTemp;
  dataTbody.appendChild(tr);
});

//删除数据
let removeData = (obj) => {
  let tr = obj.parentNode.parentNode;
  let flag = confirm('确定删除吗？');
  console.log(tr);
  if (flag) {
    dataTbody.removeChild(tr);
  }
};

//全选
let selectAllBtn = document.querySelector('#selectAllBtn');

selectAllBtn.addEventListener('click', () => {
  let checkInputs = document.querySelectorAll(
    '#dataTbody input[type=checkbox]'
  );
  console.log(checkInputs.length);
  checkInputs.forEach((item) => {
    item.checked = true;
  });
});

//清空数据
let clearBtn = document.querySelector('#clearBtn');
clearBtn.addEventListener('click', () => {
  dataTbody.innerHTML = '';
});




let empModal = document.querySelector('#empModal');
empModal.addEventListener('show.bs.modal', (event) => {
  //事件源
  window.button = event.relatedTarget;
  //获得指定属性的值
  let dataInfo = button.getAttribute('data-bs-whatever');
  console.log(dataInfo);
  if (dataInfo) {
    let emp1 = JSON.parse(dataInfo);
    let empName = empModal.querySelector('#empName');
    let empEmail = empModal.querySelector('#empEmail');
    let empJob = empModal.querySelector('#empJob');
    empName.value = emp1.name;
    empJob.value = emp1.job;
    empEmail.value = emp1.email;
  }
});

//修改数据
let updateBtn = document.querySelector("#updateBtn");
updateBtn.addEventListener('click', () => {
  let empName = empModal.querySelector('#empName');
  let empEmail = empModal.querySelector('#empEmail');
  let empJob = empModal.querySelector('#empJob');
  let emp = {
    name: empName.value,
    email: empEmail.value,
    job: empJob.value,
  };
  let empStr = JSON.stringify(emp);
  const tr = window.button.parentNode.parentNode;
  console.log(tr);
  if (empStr) {
    let tds = tr.querySelectorAll('td');
    tds[1].innerHTML = emp.name;
    tds[2].innerHTML = emp.job;
    tds[3].innerHTML = emp.email;
  }
  window.triggerButton = null;
  console.log("点击修改");
});


//反选
let reverseBtn = document.querySelector('#reverseBtn');
reverseBtn.addEventListener('click', () => {
  let checkInputs = document.querySelectorAll(
    '#dataTbody input[type=checkbox]'
  );
  checkInputs.forEach((item) => {
    item.checked = !item.checked;
  });
}); 

//删除所选
let deleteSelectBtn = document.querySelector('#deleteSelectBtn');
deleteSelectBtn.addEventListener('click', () => {
  let checkInputs = document.querySelectorAll(
    '#dataTbody input[type=checkbox]'
  );
  checkInputs.forEach((item) => {
    if (item.checked) {
      let tr = item.parentNode.parentNode;
      dataTbody.removeChild(tr);
    }
  });
});


//修改功能
